@{
    ViewBag.Title = "jQuery UI Grid [Stage 2] in ASP.NET MVC";
}
<table id="products">
    <caption>Products Grid</caption>
	<colgroup>
		<col width="4%">
        <col width="28%">
        <col width="18%">
        <col width="11%">
        <col width="16%">
        <col width="10%">
        <col width="13%">
	</colgroup>
    <thead>
        <tr>
		    <th data-property="Id" data-type="number">Id</th>
	        <th data-property="Name" data-type="string">Name</th>
		    <th data-property="Supplier.Name" data-type="string">Supplier</th>
            <th data-property="Category.Name" data-type="string">Category</th>
            <th data-property="QuantityPerUnit" data-type="string">Quantity Per Unit</th>
            <th data-property="UnitPrice" data-type="number">Unit Price</th>
            <th data-property="UnitsInStock" data-type="number">Units In Stock</th>
	    </tr>
	</thead>
	<tbody>
	</tbody>
    <tfoot>
		<tr>
			<td colspan="7">
				<span id="pager"></span>
			</td>
		</tr>
	</tfoot>
</table>
@section JavaScript {
    <script type="text/javascript">
        $(document).ready(function () {
            var products = $.ui.linqDataview({
                sort: ['Id'],
                resource: '@Url.Action("Products")'
            });

            $('#products').grid({
                source: products
            })
            .gridSort()
            .gridFilter();

            $("#pager").pager({
                source: products
            });

            products.refresh();
        });
    </script>
}